<template>
	<view>

		<view class="gui-add-list-items gui-flex gui-columns gui-justify-content-center gui-align-items-center"
			@tap="addVideo" v-if="imgLists.length < maxFileNumber && isVideo" :style="{borderRadius:borderRadius}">
			<text class="gui-add-list-btn-icon gui-block-text gui-color-gray">+</text>
			<text class="gui-add-list-btn-text gui-block-text gui-color-gray">{{btnName}}</text>
		</view>
		<!-- <view class="icon flexs5 mb25" v-if="imgLists.length < maxFileNumber">
			<view class="row flex">
				<view class="uploadImage" @tap="addImg" v-if="!isVideo">
					<text class="gui-icons" style="font-size: 80rpx;">&#xe63d;</text>
					<text class="sm_txt">上传图片</text>
				</view>
				<view class="uploadImage" @tap="addVideo" v-if="isVideo">
					<text class="gui-icons" style="font-size: 80rpx;">&#xe60b;</text>
					<text class="sm_txt">上传视频</text>
				</view>
			</view>


			<view class="f25 c333">{{msg}}</view>
		</view> -->
		<view class="gui-flex gui-rows gui-wrap">
			<view class="gui-add-list-items" :style="{borderRadius:borderRadius}" v-for="(item, index) in imgLists"
				:key="index">
				<image v-if="item.type == 'image'" :src="item.url" :data-imgurl="item.url"
					:style="{borderRadius:borderRadius}" @tap="showImgs" class="gui-add-list-img img_warp"
					:mode="imgMode"></image>
				<video class="img_warp" v-else-if="item.type == 'video'" :src="item.url"></video>
				<!-- 进度条 -->
				<view class="gui-upload-progress">
					<progress :percent="item.progress" :stroke-width="progressSize" :activeColor="progressColor"
						:backgroundColor="progressBGColor" />
				</view>
				<!-- 上传失败 -->
				<view class="gui-add-list-reup gui-flex gui-columns gui-justify-content-center gui-align-items-center"
					@tap.stop="retry" :data-index="index" v-if="item.error">
					<text class="gui-add-list-reup-icon gui-icons icon-retry gui-color-white">&#xe635;</text>
					<text class="gui-add-list-reup-text gui-color-white">失败重试</text>
				</view>
				<!-- 删除 -->
				<text class="gui-add-list-remove gui-icons" :style="{color:removeBtnColor}" @tap="removeImg"
					:id="'gui-items-img-'+index">&#xe632;</text>
			</view>
			<view class="gui-add-list-items gui-flex gui-columns gui-justify-content-center gui-align-items-center"
				@tap="addImg" v-if="imgLists.length < maxFileNumber && !isVideo" :style="{borderRadius:borderRadius}">
				<text class="gui-add-list-btn-icon gui-block-text gui-color-gray">+</text>
				<text class="gui-add-list-btn-text gui-block-text gui-color-gray">{{btnName}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	var graceJS = require('@/GraceUI5/js/grace.js');
	export default {
		name: "gui-upload-images",
		props: {
			msg: {
				type: String,
				default: '图片上传最多不超过3张'
			},
			isVideo: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			maxFileNumber: {
				type: Number,
				default: 9
			},
			btnName: {
				type: String,
				default: "添加照片"
			},
			items: {
				type: Array,
				default: function() {
					return [];
				}
			},
			removeBtnColor: {
				type: String,
				default: "rgba(0, 0, 0, 0.8)"
			},
			sourceType: {
				type: Array,
				default: function() {
					return ['album', 'camera'];
				}
			},
			borderRadius: {
				type: String,
				default: "10rpx"
			},
			uploadServerUrl: {
				type: String,
				default: ''
			},
			progressSize: {
				type: Number,
				default: 2
			},
			progressColor: {
				type: String,
				default: '#27BD81'
			},
			progressBGColor: {
				type: String,
				default: '#F8F8F8'
			},
			fileName: {
				type: String,
				default: 'img'
			},
			formData: {
				type: Object,
				default: function() {
					return {};
				}
			},
			imgMode: {
				type: String,
				default: 'aspectFill'
			},
			header: {
				type: Object,
				default: function() {
					return {};
				}
			},
			save2uniCloud: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				imgLists: [],
				updatting: false
			}
		},
		created: function() {
			this.initImgs();
		},
		watch: {
			items: function() {
				this.initImgs();
			}
		},
		methods: {
			initImgs: function() {
				var imgs = [];
				for (let i = 0; i < this.items.length; i++) {
					imgs.push({
						url: this.items[i],
						progress: 100
					});
				}
				this.imgLists = imgs;
			},
			/* 上传视频 */
			addVideo() {
				var num = this.maxFileNumber - this.imgLists.length;
				if (num < 1) {
					return false;
				}
				uni.chooseVideo({
					count: 1,
					sourceType: this.sourceType,
					success: (res) => {
						if (this.imgLists.length >= this.maxFileNumber) {
							return;
						}
						if (res.tempFilePath) {
							this.imgLists.push({
								url: res.tempFilePath,
								progress: 0,
								type: 'video'
							});
						}
						this.$emit('change', this.imgLists);
					},
					complete: function() {}
				});
			},
			addImg: function() {
				var num = this.maxFileNumber - this.imgLists.length;
				if (num < 1) {
					return false;
				}
				uni.chooseImage({
					count: num,
					sizeType: ['compressed'],
					sourceType: this.sourceType,
					success: (res) => {
						if (this.imgLists.length >= this.maxFileNumber) {
							return;
						}
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							if (this.imgLists.length >= this.maxFileNumber) {
								break;
							}
							this.imgLists.push({
								url: res.tempFilePaths[i],
								progress: 0,
								type: 'image'
							});
						}
						this.$emit('change', this.imgLists);
					},
					complete: function() {}
				});
			},
			removeImg: function(e) {
				var index = e.currentTarget.id.replace('gui-items-img-', '');
				var removeImg = this.imgLists.splice(index, 1);
				this.$emit('removeImg', removeImg[0]);
				this.$emit('change', this.imgLists);
			},
			showImgs: function(e) {
				var currentImg = e.currentTarget.dataset.imgurl;
				var imgs = [];
				for (let i = 0; i < this.imgLists.length; i++) {
					imgs.push(this.imgLists[i].url);
				}
				uni.previewImage({
					urls: imgs,
					current: currentImg
				});
			},
			setItems: function(items) {
				this.imgLists = [];
				for (let i = 0; i < items.length; i++) {
					this.imgLists.push({
						url: items[i],
						type: 'image',
						progress: 100
					});
				}
				this.$emit('change', this.imgLists);
			},
			clearAllImgs: function() {
				this.imgLists = [];
			},
			retry: function(e) {
				var index = e.currentTarget.dataset.index;
				this.upload(index);
			},
			upload: function(index) {
				if (this.updatting) {
					return;
				}
				this.updatting = true;
				if (!index) {
					index = 0;
				}
				uni.showLoading({
					title: this.isVideo ? "视频上传中" : "图片上传中",
					mask: true
				});

				if (this.save2uniCloud) {
					this.upload2cloud(index);
				} else {
					this.uploadBase(index);
				}
			},
			uploadBase: function(index) {

				// 全部上传完成
				if (index > (this.imgLists.length - 1)) {
					uni.hideLoading();
					this.updatting = false;
					this.$emit('uploaded', this.imgLists);
					return;
				}
				// 验证后端
				if (this.uploadServerUrl == '') {
					uni.showToast({
						title: "请设置上传服务器地址",
						icon: "none"
					});
					return;
				}
				// 检查是否是默认值
				if (this.imgLists[index].progress >= 1) {
					this.uploadBase(index + 1);
					return;
				}
				this.imgLists[index].error = false;
				console.log("=====================进来啦333");
				// 创建上传对象
				const task = uni.uploadFile({
					url: this.uploadServerUrl,
					filePath: this.imgLists[index].url,
					name: this.fileName,
					formData: this.formData,
					header: this.header,
					success: (uploadRes) => {
						console.log(uploadRes);
						try {
							uploadRes = JSON.parse(uploadRes.data);
							if (uploadRes.code != 200) {
								uni.showToast({
									title: "上传失败 : " + uploadRes.data,
									icon: "none"
								});
								this.error(index);
							} else {
								//上传图片成功
								this.imgLists[index].progress = 100;
								this.imgLists[index].url = uploadRes.data.url;
								this.imgLists[index].result = uploadRes.data;
								this.uploadBase(index + 1);
							}
						} catch (e) {
							console.log(e);
							console.log("=====================进来啦444");
							this.error(index);
						}
					},
					fail: (e) => {
						console.log(this.uploadServerUrl);
						uni.showToast({
							title: "上传失败，请点击图片重试",
							icon: "none"
						});
						this.error(index);

					}
				});
				task.onProgressUpdate((res) => {
					if (res.progress > 0) {
						this.imgLists[index].progress = res.progress;
						this.imgLists.splice(index, 1, this.imgLists[index]);
					}
				});
			},
			// 上传错误
			error: function(index) {
				uni.hideLoading();
				this.updatting = false;
				setTimeout(() => {
					this.imgLists[index].progress = 0;
					this.imgLists[index].error = true;
					this.imgLists.splice(index, 1, this.imgLists[index]);
					this.$emit('uploaderror');
				}, 500);
			},
			upload2cloud: function(index) {
				// 全部上传完成
				if (index > (this.imgLists.length - 1)) {
					uni.hideLoading();
					this.updatting = false;
					this.$emit('uploaded', this.imgLists);
					return;
				}
				// 检查是否是默认值
				if (this.imgLists[index].progress >= 1) {
					this.upload2cloud(index + 1);
					return;
				}
				this.imgLists[index].error = false;
				// 创建上传对象
				uniCloud.uploadFile({
					filePath: this.imgLists[index].url,
					cloudPath: graceJS.uuid() + '.png',
					onUploadProgress: (progressEvent) => {
						var percentCompleted = Math.round(
							(progressEvent.loaded * 100) / progressEvent.total
						);
						this.imgLists[index].progress = percentCompleted;
						this.imgLists.splice(index, 1, this.imgLists[index]);
					},
					success: (uploadRes) => {
						//上传图片成功
						this.imgLists[index].progress = 100;
						this.imgLists[index].url = uploadRes.fileID;
						this.imgLists[index].result = uploadRes;
						this.imgLists.splice(index, 1, this.imgLists[index]);
						this.upload2cloud(index + 1);
					},
					fail: () => {
						uni.showToast({
							title: "上传失败",
							icon: "none"
						});
						this.error(index);
					}
				});
			}
		}
	}
</script>
<style scoped>
	.gui-add-list-btn-text {
		font-size: 26rpx;
		line-height: 36rpx;
		text-align: center;
	}

	.gui-add-list-btn-icon {
		font-size: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-bottom: 20rpx;
	}

	.gui-add-list-items {
		width: 190rpx;
		height: 190rpx;
		overflow: hidden;
		margin: 9rpx;
		background-color: #F8F8F8;
		font-size: 0;
		position: relative;
	}

	.gui-add-list-remove {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 44rpx;
		position: absolute;
		z-index: 5;
		right: 0;
		top: 0;
	}

	.gui-add-list-img {
		width: 190rpx;
	}

	.gui-upload-progress {
		position: absolute;
		z-index: 2;
		left: 0;
		bottom: 10rpx;
		width: 158rpx;
		padding: 0 16rpx;
	}

	.gui-add-list-reup {
		position: absolute;
		z-index: 3;
		left: 0;
		top: 0rpx;
		width: 190rpx;
		height: 190rpx;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.gui-add-list-reup-icon {
		text-align: center;
		font-size: 68rpx;
		line-height: 100rpx;
	}

	.gui-add-list-reup-text {
		text-align: center;
		font-size: 20rpx;
		line-height: 30rpx;
	}

	.flex {
		display: flex;
	}

	.uploadImage {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
	}

	.sm_txt {
		font-size: 18rpx;
		margin: 0 0 20rpx 0;
	}

	.img_warp {
		width: 100%;
		height: 100%;
	}
</style>